<template>
<div>
  <el-form :inline="true" ref="form" :model="form" label-width="80px">
    <el-form-item label="部门名称">
      <el-input v-model="form.deptName"></el-input>
    </el-form-item>
    <el-form-item label="部门状态">
      <el-select v-model="form.status" placeholder="部门状态">
        <el-option label="正常" value="0"></el-option>
        <el-option label="停用" value="1"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="deptList">查询</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
  <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="deptId"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
        prop="deptName"
        label="部门名称"
        sortable
        width="180">
    </el-table-column>
    <el-table-column
        prop="orderNum"
        label="排序"
        sortable
        width="180">
    </el-table-column>
    <el-table-column
        prop="status"
        label="状态">
      <template v-slot="ss">
        <span v-if="ss.row.status==0"><el-button type="primary" plain>正常</el-button></span>
        <span v-if="ss.row.status==1"><el-button type="info" plain>停用</el-button></span>
      </template>
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="创建时间">
    </el-table-column>
    <el-table-column
        label="操作">
    </el-table-column>
  </el-table>
</div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        deptName: '',
        status: ''
      },
      tableData: []
    }
  },
  methods: {
    deptList(){
      const params= this.form;
      console.log(params)
      this.axios.get("http://localhost:6785/dept/select",{params}).then(res=>{
        console.log(res.data.list);
        this.tableData=res.data.list;
      })
    }
  },
  created() {
    this.deptList();
  }
}
</script>
<style scoped>

</style>